<template>
  <div>
    <el-table height=window.screen.height stripe border style="width:100%" highlight-current-row :data="tableData"
      v-loading="loading">
      　　

      　　
      <el-table-column prop="id" label="商品ID" align="center" min-width="60">
        　　
      </el-table-column>
      　　
      <el-table-column prop="title" label="商品标题" align="center" min-width="100">
      </el-table-column>

      <el-table-column prop="price" label="商品价格" align="center" min-width="80">
      </el-table-column>
      <el-table-column prop="description" label="商品描述" align="center" min-width="100" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="guarentee" label="商品押金" align="center" min-width="100">
      </el-table-column>
      　　　　<el-table-column prop="createrId" label="卖家ID" align="center" min-width="100">
      </el-table-column>
      <el-table-column prop="status" label="商品状态" align="center" min-width="60">
        <template slot-scope="scope">
          {{ scope.row.status == '1' ? "上架" : scope.row.status == '2' ? "下架" : scope.row.status == '3' ? "删除" : '' }}
        </template>
      </el-table-column>

      <el-table-column prop="createrId" label="创建者ID" align="center" min-width="60">
        　　
      </el-table-column>
      　　
      <el-table-column label="操作" align="center" min-width="80">
        　　　　
        <template slot-scope="scope">
          　　　　　　
          <el-button type="info" @click="xiajia(scope.row.id)">下架</el-button>

          <el-button type="info" @click="shangjia(scope.row.id)">上架</el-button>
          　　　　
        </template>
        　　
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: '',
        title: '',
        description: '',
        price: '',
        guarentee: '',
        status: '',
        createrId: '',
        edit: false
      },
      ],
      loading: false
    }
  },
  methods: {
    init() {
      {

        if (localStorage.products) {
          this.tableData = JSON.parse(localStorage.products);
        } else {
          this.loading = true
          this.axios({
            method: 'GET',
            url: "https://admin.xiaoheihe.work/bapi/getallgoods"
          }).then(response => {
            console.log(response.data);
            this.tableData = response.data
            localStorage.products = JSON.stringify(response.data);
            this.loading = false
            setTimeout(() => {
              removeLocalStorage(products);
            }, 300000)
          })

        }



      }
    },
    shangjia(id) {
      console.log(id)
      this.loading = true
      this.axios({
        method: "patch",
        url: "https://admin.xiaoheihe.work/bapi/take_up",
        data: {
          id: id,
        }
      }).then(res => {

        console.log(res.data)

        if (res.data == 'OK') {
          let getproducts = localStorage.getItem("products");
          localStorage.removeItem(getproducts);

          this.axios({
            method: 'GET',
            url: "https://admin.xiaoheihe.work/bapi/getallgoods"
          }).then(response => {
            console.log(response.data);
            this.tableData = response.data
            localStorage.products = JSON.stringify(response.data);
            this.loading = false;
            this.$message({
              type: 'info',
              message: `上架成功`
            });
            this.init()
          })

        }
      })
    },
    xiajia(id) {
      console.log(id)
      this.axios({
        method: "patch",
        url: "https://admin.xiaoheihe.work/bapi/take_down",
        data: {
          id: id,
        }
      }).then(res => {



        if (res.data == 'OK') {
          let getproducts = localStorage.getItem("products");
          localStorage.removeItem(getproducts);

          this.axios({
            method: 'GET',
            url: "https://admin.xiaoheihe.work/bapi/getallgoods"
          }).then(response => {
            console.log(response.data);
            this.tableData = response.data
            localStorage.products = JSON.stringify(response.data);
            this.loading = false;
            this.$message({
              type: 'info',
              message: `下架成功`
            });
            this.init()
          })

        }




      })
    },
  },
  created() {
    console.log('============')
    this.init();
  }
}
</script>
